import React, { memo, useEffect, useState } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { SongPageLeftWrap } from "./style";
import { getCommentMusicAction } from "../store/actionTypes";
import Comment from "@/components/aboutComment/comment";
import Pagination from "@/components/pagination";
import Left from "./left";

export default memo(function SongLeft(props) {
  const dispatch = useDispatch();
  const [pageState, setPageState] = useState(1);
  useEffect(() => {
    dispatch(getCommentMusicAction(props.id, 12, (pageState - 1) * 12));
  }, [dispatch, props.id, pageState]);
  const { commentMusic } = useSelector(
    (state) => ({
      commentMusic: state.getIn(["songPage", "commentMusic"]),
    }),
    shallowEqual
  );

  const getPage = (page) => {
    setPageState(page);
  };
  return (
    <SongPageLeftWrap>
      <Left total={commentMusic.total} id={props.id} />
      <Comment comments={commentMusic} />
      <Pagination
        page={pageState}
        size={12}
        getPage={getPage}
        total={commentMusic.total}
      />
    </SongPageLeftWrap>
  );
});
